<template>
  <div class="app-container flex-container">
    <div class="left">
      <Tree @change="deptChange"></Tree>
    </div>
    <div class="right">
      <el-row :gutter="20" style="margin-bottom: 20px;margin-right: 0;">
        <el-col :span="6">
          <el-input v-model="req._name_" type="text" placeholder="请输入名称" @change="getList"></el-input>
        </el-col>
        <el-col :span="6">
          <el-select v-model="req.status" style="width: 100%" placeholder="请选择状态">
            <el-option label="在线" value="1"></el-option>
            <el-option label="离线" value="0"></el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
          <el-button type="success" icon="el-icon-plus" @click="add">新增</el-button>
        </el-col>
      </el-row>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="序号" width="60" align="center" show-overflow-tooltip>
          <template slot-scope="{$index}">
            {{ $index + 1 + (req.page - 1) * req.pageSize }}
          </template>
        </el-table-column>
        <el-table-column prop="code" label="设备编号" min-width="120" align="left" show-overflow-tooltip></el-table-column>
        <el-table-column prop="name" label="名称" min-width="120" align="left" show-overflow-tooltip></el-table-column>
        <el-table-column prop="groupName" label="部门" min-width="120" align="left" show-overflow-tooltip></el-table-column>
        <el-table-column prop="status" label="在线状态" width="100" align="center">
          <template slot-scope="{row}">
            {{ row.status == 1 ? '在线' : '离线' }}
          </template>
        </el-table-column>
        <el-table-column prop="location" label="经纬度" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="{ row }">
            <el-button @click="edit(row)" type="text" size="small">编辑</el-button>
            <el-button @click="unbind(row)" type="text" size="small">解绑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <Pagination v-show="total" :total="total" :page.sync="req.page" :limit.sync="req.pageSize" @pagination="getList"></Pagination>
    </div>

    <Edit :show.sync="showEdit" :group="group" :item="currentItem" @confirm="getList"></Edit>
  </div>
</template>
<script>
import Edit from "./components/edit.vue";
import { groupTree } from "@/api/user";
import { getList, remove } from "@/api/device";

export default {
  name: "index",
  components: { Edit },
  data() {
    return {
      tableData: [],
      total: 0,
      req: {
        typeKey: 1,
        page: 1,
        pageSize: 20,
      },
      deptTree: [],
      group: null,
      showBind: false,
      showEdit: false,
      currentItem: {},
    };
  },
  mounted() {
    groupTree().then((res) => {
      this.deptTree = res.data;
    });
    this.getList();
  },
  methods: {
    deptChange(e) {
      this.group = e;
      this.req.groupPath_ = e.groupPath;
      this.getList();
    },
    async getList() {
      try {
        const res = await getList(this.req);
        this.tableData = res.data;
        this.total = res.total;
      } catch (e) {}
    },
    add() {
      if (!this.group) {
        return this.$message.warning("请先选择一个部门");
      }
      this.showEdit = true;
    },
    edit(row) {
      this.currentItem = structuredClone(row);
      this.showEdit = true;
    },
    unbind(row) {
      this.$modal
        .confirm("是否确认解绑此设备")
        .then((res) => {
          return remove({ id: row.id });
        })
        .then((res) => {
          this.$modal.msgSuccess("操作成功！");
          this.getList();
        });
    },
  },
};
</script>


<style scoped lang="scss">
</style>
